<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>餐桌预定组件</title>
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <script src="../../plugins/swiper/swiper-bundle.min.js"></script>
  <link rel="stylesheet" href="../../plugins/swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="../../plugins/swiper/style.css">

  <link rel="stylesheet" href="../../styles/common.css" />

  <style>

  .background2 {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .background2:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
  }
  .background2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
  }

  .news-slider {
    z-index: 2;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
  }
  @media screen and (max-width: 1300px) {
    .news-slider {
      max-width: 1000px;
    }
  }
  @media screen and (max-width: 576px) {
    .news-slider {
      margin-top: 45px;
    }
  }


</style>
</head>

<body>
<!--<div class="row justify-content-center" id="app">-->
<div id="app">


  <div class="wrapper">

    <div class="background2">
      <img src="../../images/qiantai/test-bg.png"/>
    </div>
    <div class="item-bg"></div>

    <div class="news-slider" >

    <!--  内容-->
    <div  class="news-slider__wrp swiper-wrapper">

      <div class="news-slider__item swiper-slide" v-for="item in items">
        <a  class="news__item">
          <div class="news-date">
            <button @click="schedule(item)" style="margin:0 0 0 200px;width: 100px;height: 50px;background-color: #b3e19d;border: none;cursor: pointer">预定</button>

            <span class="news-date__title">{{item.name}}</span>
            价格：￥<span class="news-date__txt">{{item.price}}</span>

            <div style="margin-top: 20px">
              预定状态：<span class="news-date__txt">{{item.isFlag}}</span>
            </div>
          </div>
          <div class="news__title">
            餐桌简介：<h3>{{item.description}}</h3>
          </div>
          <div class="news__img">
            <img :src= `/photos/download?name=${item.image}` alt="news">

          </div>
        </a>
      </div>

    </div>

    <!--  滑动选择-->
    <div class="news-slider__ctr">

      <div class="news-slider__arrows">
        <button class="news-slider__arrow news-slider-prev">
          <span class="icon-font">
            <svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg>
          </span>
        </button>
        <button class="news-slider__arrow news-slider-next">
          <span class="icon-font">
            <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>
          </span>
        </button>
      </div>

      <div class="news-slider__pagination"></div>

    </div>

</div>

  </div>

  <!--2.新增修改 预定弹框-->
  <el-dialog title="餐桌预定" style="height: 750px"  :visible.sync="DishFlavorAddShow">
    <el-form :model="formData_scheduleTable" :rules="rules" ref="formData_scheduleTable" label-width="100px" class="demo-formData_scheduleTable">

      <el-form-item  label="联系人：" prop="contacts">
        <el-input v-model="formData_scheduleTable.contacts"></el-input>
      </el-form-item>
      <el-form-item  label="联系电话：" prop="telephone">
        <el-input v-model="formData_scheduleTable.telephone"></el-input>
      </el-form-item>

      <el-form-item  label="开始日期：" prop="startscheduleTime">
        <template>
          <div class="block">
            <el-date-picker
                    value-format="yyyy-MM-dd HH:mm"
                    v-model="formData_scheduleTable.startscheduleTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    default-time="12:00:00">
            </el-date-picker>
          </div>
        </template>
      </el-form-item>
      <el-form-item  label="结束日期：" prop="endscheduleTime">
        <template>
          <div class="block">
            <el-date-picker
                    value-format="yyyy-MM-dd HH:mm"
                    v-model="formData_scheduleTable.endscheduleTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    default-time="12:00:00">
            </el-date-picker>
          </div>
        </template>
      </el-form-item>

      <el-form-item  label="备注：" prop="remarks">
        <el-input v-model="formData_scheduleTable.remarks"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">立即预定</el-button>
        <el-button @click="resetForm('formData_scheduleTable')">全部重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


</div>
  <svg hidden="hidden" id="icon">
  <defs>
    <symbol id="icon-arrow-left" viewBox="0 0 32 32">
      <title>arrow-left</title>
      <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
    </symbol>
    <symbol id="icon-arrow-right" viewBox="0 0 32 32">
      <title>arrow-right</title>
      <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
    </symbol>
  </defs>
</svg>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>


<script>
  new Vue({
    el: '#app',
    data:{
      userInfo:'',
      items:[
        {
          id:'',
          image:'',
          isSchedule:'是',
          name:'默认',
          description:'默认',
          price:'默认',
          isFlag:'已预定',
        }
      ],


      price2:"",
      imageUrl:'',


      //预定弹框信息
      DishFlavorAddShow : false,
      formData_scheduleTable:{},

      // 弹框表单（input）校验
      rules: {
        contacts: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
          // { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确的手机号' }
        ],
        telephone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确的手机号' }
        ],
        startscheduleTime: [
          { required: true, message: '请输入开始预定时间', trigger: 'blur' },
        ],
        endscheduleTime: [
          { required: true, message: '请输入结束预定时间', trigger: 'blur' },
        ],
      }

    },
    created() {
      const userInfo = window.localStorage.getItem('userInfo')
      console.log("dsdasdasdasd")
      if (userInfo!=="null") {
        this.userInfo = JSON.parse(userInfo)

        // if (JSON.parse(userInfo).data.username!=='未登录123'){
        // }
      }
      console.log("userInfo22:::")
      console.log(this.userInfo)

      this.getAll();
    },
    methods:{
      getAll(){
        axios.get("/diningTables/getAllDiningTable").then((res)=> {
          console.log("获取全部餐桌数据：")
          this.items=res.data.data

          console.log( this.items)
          for (var i = 0; i < this.items.length; i++) {
            console.log(this.items[i].isSchedule)
            if (this.items[i].isSchedule=="是"){
              this.items[i].isFlag='已预定'
            }else {
              this.items[i].isFlag='未预定'
            }
          }
        })
      },


      //弹出弹框
      schedule(row){
        this.price2=row.price

        if (this.userInfo==null){
          //判断用户是否登录。未登录则提示前往登录
          alert("用户未登录！请前往登录")
        }else{
              //判断当前用户是否已经预定过餐桌
            axios.get("/scheduleTables/getMyScheduleTable/"+this.userInfo.data.id).then((res)=> {
              alert(res.data.code && res.data.data.sttus !=="预定结束")
                  if (res.data.code && res.data.data.sttus !=="预定结束"){
                    //查到用户还已经预定餐桌
                    alert("您已预定餐桌！不可重复预定，可以取消您之前的预定！")
                  }else {
                    //查到用户还未预定餐桌
                    this.DishFlavorAddShow=true
                    this.formData_scheduleTable=row
                  }
              })
          }
        },

      //立即预定
      submitForm() {
        this.$refs.formData_scheduleTable.validate((valid)=>{
          if (valid){
            this.$confirm("此餐桌需支付"+this.price2+"，是否继续?","提醒",{type: 'info'
            }).then(()=>{
              this.formData_scheduleTable.id=''
              this.formData_scheduleTable.userId=this.userInfo.data.id
              this.formData_scheduleTable.username=this.userInfo.data.username

              //预定都是默认'未通过' 只能由后台设置通过 （就是能预定 但是不代表预定通过了）
              // this.formData_scheduleTable.status="未通过"
              console.log("提交表单：")
              console.log(this.formData_scheduleTable)

              //通过餐桌名，用户预定的时间段是否于成功预定的冲突
              axios.post("/scheduleTables/getScheduleTable/",this.formData_scheduleTable).then((res)=> {
                if (res.data.code){
                  //1.存储到餐桌预定表
                  axios.post("/scheduleTables/add",this.formData_scheduleTable).then((res)=>{
                    this.$message.success(res.data.msg)
                  }).finally(()=>{
                    this.getAll()
                    this.DishFlavorAddShow=false
                  })

                  console.log("修改DiningTable表的is_schedule属性：")
                  console.log(this.formData_scheduleTable)

                  //2.修改餐桌信息的'是否'预定内容
                  axios.put("/diningTables",this.formData_scheduleTable).then((res)=>{

                  })
                }else {
                  alert(res.data.msg)
                }
              })



            })
          }

        })
      },

      //图片
      getImage (image) {
        this.imageUrl1= `/photos/download?name=${image}`
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

    },
  })
</script>
<script src="../../plugins/swiper/slide.js"></script>

</body>
</html>
